import {
    Button,
    Card,
    message,
    Tag,
    Col,
    Row
  } from 'antd';
  import { PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';
  import React, { Component } from 'react';
  import { connect, history } from 'umi';
  import moment from 'moment';
  import styles from './index.less';
  import CourseInfo from './courseInfo';
  import YyRecord from './yyRecord';
  import SupCard from './supCard';
  import { deleteClassTableInfoById } from '../service';
  import {HasPermission} from '@/components/AuthComponent/HasPermission';
  import Contanst from '@/config/contanst';
  const AuthButton = HasPermission(Button);
  
  class ReservationDetail extends Component {
    state = {
      tabActiveKey: 'yyRecord',
    };
  
    componentDidMount() {
      const { dispatch,match } = this.props;
      dispatch({
        type: 'cubeReservationRecord/queryClassTableInfoById',
        payload: {
          classId:match.params.id
        },
      })
      dispatch({
        type: 'cubeReservationRecord/queryMemberBookingCourseInfoByClassId',
        payload: {
          classId:match.params.id
        },
      });
    }
  
    /**
     * tab切换
     */
    onTabChange = tabActiveKey => {
      this.setState({
        tabActiveKey,
      });
    };
  
    /**
     * 去编辑
     */
    goToEdit = () =>{
      const { match,classTableInfo } = this.props;
      if(classTableInfo.type=='3'){
        history.push(`/lesson/private/edit/${match.params.id}`);
      }else{
        history.push(`/lesson/schedule/edit/${match.params.id}`);
      }
    }
  
    /**
     * 删除课时
     */
    delCourseSchedule = async () =>{
      let tableInfoId = this.props.match.params.id
      const hide = message.loading('正在删除');
      if (!tableInfoId) return true;
      try {
        let result = await deleteClassTableInfoById({
          id: tableInfoId
        });
        hide();
        if(result.code == 0 ){
          message.success('删除成功，正在跳转');
          window.history.go(-1);
          return true;
        }else{
          message.success(result.message);
          return false;
        }
      } catch (error) {
        hide();
        message.error('删除失败，请重试');
        return false;
      }
    }

    /**
     * 跳转教练详情
     * @param {*} record 
     */
    go2UserDetail = (record) =>{
      history.push(`/employee/list/detail/${record.coachId}`);
    }
    render() {
      const {  tabActiveKey,tabList } = this.state;
      const { classTableInfo,vipCardList } = this.props
      const description = (
        <RouteContext.Consumer>
          {({ isMobile }) => (
            <Card className={styles.titleCard}>
              <Row className={styles.desc}>
                <Col span={3}>{classTableInfo.coursePicture?<img className={styles.img} src={`http://mmm.supercube.vip/${classTableInfo.coursePicture}`}/>:<img className={styles.img} src={`http://mmm.supercube.vip/2020/09/a5df4fad-c9f6-4c8f-ab45-55d0cf3745e5.png`}/>}</Col>
                <Col span={16}>
                  <div><Tag color="#108ee9">{Contanst.CourseTypeMap[classTableInfo.type]}</Tag><span className={styles.name}>{classTableInfo.courseName}</span></div>
                  <div><span className={styles.date}>{classTableInfo.date} {classTableInfo.timePeriod}</span><a className={styles.coach} onClick={()=>this.go2UserDetail(classTableInfo)}>{classTableInfo.coachName}</a><span className={styles.time}>{classTableInfo.courseDuration}分钟</span></div>
                  <div>
                  <span className={styles.yyy}><span className={styles.label}>已预约：</span><span className={styles.value}>{classTableInfo.bookingNum||0}</span></span>
                  <span className={styles.yqd}><span className={styles.label}>已签到：</span><span className={styles.value}>{classTableInfo.signInNum||0}</span></span>
                  <span className={styles.yqx}><span className={styles.label}>已取消：</span><span className={styles.value}>{classTableInfo.cancelNum||0}</span></span>
                  </div>
                </Col>
                <Col span={5} className={styles.oper}>
                  <AuthButton auth={[`lesson:schedule:update`]} onClick={()=>this.goToEdit()}>编辑</AuthButton>
                  <AuthButton auth={[`lesson:schedule:delet`]} danger onClick={()=>this.delCourseSchedule()}>删除课时</AuthButton>
                </Col>
              </Row>
            </Card>
          )}
        </RouteContext.Consumer>
      );
      return (
        <PageHeaderWrapper
          title="预约记录"
          className={styles.pageHeader}
          content={description}
          tabActiveKey={tabActiveKey}
          onTabChange={this.onTabChange}
          tabList={classTableInfo.type=='3'?[
            {
              key: 'yyRecord',
              tab: '预约记录',
            },
            {
              key: 'courseInfo',
              tab: '课时信息',
            }
          ]:[
            {
              key: 'yyRecord',
              tab: '预约记录',
            },
            {
              key: 'courseInfo',
              tab: '课时信息',
            },
            {
              key: 'supCard',
              tab: '支持会员卡',
            }
          ]}
        >
          <div className={styles.main}>
            {
              tabActiveKey=='yyRecord'&&<YyRecord classTableInfo={classTableInfo}/>
            }
            {
              tabActiveKey=='courseInfo'&&<CourseInfo id={this.props.match.params.id} classTableInfo={classTableInfo}/>
            }
            {
              tabActiveKey=='supCard'&&<SupCard id={this.props.match.params.id} classTableInfo={classTableInfo}/>
            }
          </div>
        </PageHeaderWrapper>
      );
    }
  }
  
  export default connect(({ cubeReservationRecord, loading }) => ({
    loading: loading.effects['cubeReservationRecord/fetchReservationDetail'],
    classTableInfo: cubeReservationRecord.classTableInfo
  }))(ReservationDetail);
  